<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
    <svg width="400" height="400" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <rect width="100%" height="100%" fill="transparent" stroke="#000" />
        <path d="M 10 10, L 30 10, L 40 60, H 30, V 100 Z" stroke="#000" fill="transparent" />
        <circle r="2" cx="10" cy="10" fill="brown" />

        <path d="M 10 150 l 20 0 l 10 50 h -10 v 40 z" stroke="#000" fill="transparent" />
        <circle r="2" cx="10" cy="150" fill="brown" />
    </svg>

    <!-- 
        M 移动画笔
        L 画直线
        H、V 水平 垂直画线
        Z 闭合 
     -->

     <svg width="400" height="400" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <rect width="100%" height="100%" fill="transparent" stroke="#000" />
        <path d="M 10 10 C 50 50 250 50 290 10" fill="transparent" stroke="#000" />
        <circle r="2" cx="10" cy="10" fill="brown" />
    </svg>

    <svg width="400" height="400" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <rect width="100%" height="100%" fill="transparent" stroke="#000" />
        <path d="M 10 10 C 50 30 250 30 290 10" fill="transparent" stroke="#000" />
        <circle r="2" cx="10" cy="10" fill="brown" />
    </svg>

    <svg width="400" height="400" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <rect width="100%" height="100%" fill="transparent" stroke="#000" />
        <path d="M 10 150 C 60 300 260 50 310 150" fill="transparent" stroke="#000" stroke-width="6" stroke-linecap="round" />
        <circle r="2" cx="10" cy="150" fill="brown" />
    </svg>
</body>
</html>